<style>
html,body,div,p{
  margin:0px;
  padding:0px;
}

.cb{
  clear: both;
}
</style>
<style scoped>

  .container{
    width:100%;
    min-height:calc( 100vh );
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .header{
    width:100%;
    height:72px;
    margin-bottom:8px;
    border-bottom:1px solid rgba(0,0,0,0.4);
    background-position: left top;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }

  .header a.back-btn{
    color:#FFF;
    height:72px;
    line-height:48px;
    font-size:18px;
    text-decoration: none;
    margin-left:auto;
    margin-right:16px;
  }

  .set-board{
    box-sizing: border-box;
    width:650px;
    float: left;
    min-height: calc( 100vh - 81px );
    background-color: #09203F;
    border-top:1px solid #0C4062;
    border-right:1px solid #0C4062;
  }

  .chartbox{
    width:calc( 100vw - 820px );
    height:calc( 100vh - 81px );
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chartbox #chart{
    width:calc( 100vw - 1020px );
    height:calc( 100vh - 281px );
    background-color: #FFF;
  }

  .tool-box{
    position: fixed;
    right:0px;
    top:80px;
    width:49px;
    border-top:1px solid #0C4062;
    border-left:1px solid #0C4062;
    border-bottom:1px solid #0C4062;
  }

  .tool-box a.item{
    display: block;
    width:49px;
    height:49px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
  }

  .tool-box a.item .tip{
    position: absolute;
    top:10px;
    right:57px;
    height:30px;
    line-height:30px;
    background-color: #0C4062;
    border-radius: 2px;
    color:#FFF;
    font-size: 12px;
    text-align: center;
    padding:0px 10px;
    white-space: nowrap;
    display: none;
  }

  .tool-box a.item .icon{
    position: absolute;
    right:-14px;
    top:8px;
    width:0px;
    height:0px;
    border:7px solid transparent;
    border-left: 7px solid #0C4062;
  }

  .tool-box a.item:hover .tip{
    display: block;
  }

  .img-fbox{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width:100%;
    height:calc( 100vh );
    background-color: rgba(0,0,0,0.3);
    top:0px;
    left:0px;
  }

  .tab-box{
  width:60px;
  height:calc( 100vh - 82px );
  box-sizing: border-box;
  background-color: #04101F;
  padding-top:10px;
  position: absolute;
  top:0px;
  left:0px;
}

.tab-box .tab{
  display: block;
  text-decoration: none;
  width:50px;
  height:30px;
  line-height:30px;
  text-align:center;
  margin-left:10px;
  margin-bottom:10px;
  color:#FFF;
  font-size:14px;
  background-color: transparent;
  transition: all .2s ease-in-out;
  border-radius: 5px 0px 0px 5px;
}

.tab-box .tab.hover,.tab-box .tab:hover{
  background-color: #09203F;
}

.pane{
  position: absolute;
  top:0px;
  left:60px;
  height:calc( 100vh - 82px );
  width:calc( 100% - 60px );
  box-sizing: border-box;
  padding:0px 20px;
  opacity: 1;
  padding-top:5px;
  padding-bottom:20px;
  overflow: auto;
}

.pane::-webkit-scrollbar
{
    width:10px;
}

.pane::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background-color: rgba(255,255,255,0.3);
}

.pane .title{
  height:30px;
  line-height:30px;
  font-size:14px;
  color:#1AC0ED;
}

.pane .hr{
  width:100%;
  height:1px;
  margin:10px 0px;
  background-color: #FFF;
  opacity: 0.3;
}

.series-box{
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.series-box .series{
  height: 16px;
  line-height: 16px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  min-width: 46px;
  padding: 0px 4px;
  border: 1px solid #FFF;
  color: #FFF;
  transition: all .2s ease-in-out;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  background-color: transparent;
}

.series-box .series.hover{
  background-color: #FFF;
  color:#828599;
}

.type-box-wapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width:100%;
  height:calc( 100vh );
  background-color: rgba(0,0,0,0.3);
  top:0px;
  left:0px;
}

.type-fbox{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width:100%;
  height:calc( 100vh );
  background-color: rgba(0,0,0,0.3);
  top:0px;
  left:0px;
}

.type-box-wapper .type-box{
  width:580px;
  padding:20px;
  background-color: #09203F;
  border:1px solid #0C4062;
  display: flex;
  align-items: center;
}

.type-box-wapper .type-box .item{
  width:186px;
  margin-right:10px;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.type-box-wapper .type-box .item:last-child{
  margin-right: 0px;
}

.type-box-wapper .type-box .item .img{
  width:186px;
  height:93px;
}

.type-box-wapper .type-box .item .name{
  margin-top:10px;
  font-size:18px;
  color:#FFEA00;
  height:32px;
  line-height:32px;
  text-align: center;
}

.theme-box{
  width:100%;
}

.theme-box .theme{
  display: block;
  width:160px;
  height:120px;
  border:1px solid #FFF;
  margin-bottom:10px;
  margin-left:auto;
  margin-right:auto;
  cursor: pointer;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
<template>
  <div class="container" :style="{'background-image':'url('+publicPath+'bg.jpg)'}">
    <div class="header" :style="{'background-image':'url('+publicPath+'header.png)'}">
      <a class="back-btn" :href="backBtnUrl">返回</a>
    </div>
    <div class="set-board">
      <div style="position:relative;">
        <div class="tab-box">
          <a href="javascript:;" class="tab" @click="showPaneId=0" :class="{'hover':showPaneId===0}">通用</a>
          <a href="javascript:;" class="tab" @click="showPaneId=1" :class="{'hover':showPaneId===1}">标题</a>
          <a href="javascript:;" class="tab" @click="showPaneId=2" :class="{'hover':showPaneId===2}">视区</a>
          <a href="javascript:;" class="tab" @click="showPaneId=3" :class="{'hover':showPaneId===3}">X轴</a>
          <a href="javascript:;" class="tab" @click="showPaneId=4" :class="{'hover':showPaneId===4}">Y轴</a>
          <a href="javascript:;" class="tab" @click="showPaneId=999" :class="{'hover':showPaneId===999}">数据</a>
          <a href="javascript:;" class="tab" @click="showPaneId=10001" :class="{'hover':showPaneId===10001}">主题</a>
        </div>
        <transition-group name="fade" tag="div" mode="in-out">

          <!-- pane0 -->
          <div class="pane" v-show="showPaneId===0" key="c0">

            <slider
              label="图的高度"
              :max="1080"
              v-model="chartHeight"
              :def="470"
            />

            <div class="hr"></div>
            <div class="title">通用颜色</div>
            <colorpicker
              label="图整体背景颜色"
              v-model="editConfig.backgroundColor"
            />
            <colorpicker2
              label="系列的默认颜色列表"
              v-model="editConfig.color"
            />
          </div>
          <!-- / pane0 -->

          <!-- pane1 -->
          <div class="pane" v-show="showPaneId===1" key="c1">
            <xinput
              label="主标题文本"
              v-model="editConfig.title.text"
            />
            <xinput
              label="主标题文本超链接"
              v-model="editConfig.title.link"
            />
            <xinput
              label="副标题文本"
              v-model="editConfig.title.subtext"
            />
            <xinput
              label="副标题文本超链接"
              v-model="editConfig.title.sublink"
            />

            <div class="hr"></div>
            <div class="title">标题块位置</div>
            <slider5
              label="水平安放位置"
              :options="[{label:'居左',value:'left'},{label:'居中',value:'center'},{label:'居右',value:'right'}]"
              :max="2000"
              v-model="editConfig.title.left"
            />
            <slider5
              label="垂直安放位置"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              :max="2000"
              v-model="editConfig.title.top"
            />
            <xradio
              label="水平对齐方式"
              :options="[{label:'居左',value:'left'},{label:'居中',value:'middle'},{label:'居右',value:'right'}]"
              v-model="editConfig.title.textAlign"
            />
            <xradio
              label="垂直对齐方式"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.title.textVerticalAlign"
            />

            <div class="hr"></div>
            <div class="title">标题块外观</div>

            <colorpicker
              label="标题背景颜色"
              v-model="editConfig.title.backgroundColor"
            />
            <slider
              label="标题边框线宽"
              :max="30"
              v-model="editConfig.title.borderWidth"
            />
            <colorpicker
              label="标题边框颜色"
              v-model="editConfig.title.borderColor"
            />
            <slider
              label="标题内边距"
              :max="10"
              v-model="editConfig.title.padding"
            />
            <slider
              label="主副标题纵向间隔"
              :max="50"
              v-model="editConfig.title.itemGap"
            />

            <div class="hr"></div>
            <div class="title">主标题文本样式</div>

            <colorpicker
              label="文本颜色"
              v-model="editConfig.title.textStyle.color"
            />
            <slider
              label="字体大小"
              v-model="editConfig.title.textStyle.fontSize"
              :min="20"
              :max="60"
            />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.title.textStyle.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.title.textStyle.fontWeight"
            />

            <div class="hr"></div>
            <div class="title">副标题文本样式</div>

            <colorpicker
              label="文本颜色"
              v-model="editConfig.title.subtextStyle.color"
            />
            <slider
              label="字体大小"
              v-model="editConfig.title.subtextStyle.fontSize"
              :min="20"
              :max="60"
            />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.title.subtextStyle.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.title.subtextStyle.fontWeight"
            />

          </div>
          <!-- / pane1 -->

          <!-- pane2 -->
          <div class="pane"  v-show="showPaneId===2" key="c2">
            <slider3
              label="左上角距离顶部距离"
              :max="150"
              v-model="editConfig.grid.top"
            />
            <slider3
              label="左上角距离左边距离"
              :max="150"
              v-model="editConfig.grid.left"
            />
            <slider3
              label="右下角距离右边距离"
              :max="150"
              v-model="editConfig.grid.right"
            />
            <slider3
              label="右下角距离底部距离"
              :max="150"
              v-model="editConfig.grid.bottom"
            />
          </div>
          <!-- /pane2 -->

          <!-- pane3 -->
          <div class="pane"  v-show="showPaneId===3" key="c3">
            <xradio
              label="坐标轴位置"
              :options="[{label:'居上',value:'top'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.xAxis.position"
            />
            <div class="hr"></div>
            <xinput label="坐标轴名称" v-model="editConfig.xAxis.name"/>
            <xradio
              label="坐标轴名称位置"
              :options="[{label:'位于开端',value:'start'},{label:'位于末端',value:'end'}]"
              v-model="editConfig.xAxis.nameLocation"
            />
            <div class="title">坐标轴名称文字样式</div>
            <colorpicker label="文字颜色" v-model="editConfig.xAxis.nameTextStyle.color"/>
            <slider label="字体大小" :max="40" v-model="editConfig.xAxis.nameTextStyle.fontSize" />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.xAxis.nameTextStyle.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.xAxis.nameTextStyle.fontWeight"
            />
            <xradio
              label="文本垂直对齐方式"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.xAxis.nameTextStyle.verticalAlign"
            />
            <div class="hr"></div>
            <div class="title">轴线样式设置</div>
            <xradio
              label="轴线是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.xAxis.axisLine.show"
            />
            <colorpicker label="线条颜色" v-model="editConfig.xAxis.axisLine.lineStyle.color" />
            <slider label="线条宽度" v-model="editConfig.xAxis.axisLine.lineStyle.width" />
            <xradio
              label="线条类型"
              :options="[{label:'实线',value:'solid'},{label:'点状线',value:'dotted'},{label:'虚线',value:'dashed'}]"
              v-model="editConfig.xAxis.axisLine.lineStyle.type"
            />

            <div class="hr"></div>
            <div class="title">文本标签设置</div>

            <xradio
              label="文本标签是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.xAxis.axisLabel.show"
            />
            <slider
              label="文本标签旋转角度"
              :min="-180"
              :max="180"
              v-model="editConfig.xAxis.axisLabel.rotate"
              unit="°"
            />
            <slider
              label="文本标签与坐标轴间的距离"
              :max="50"
              v-model="editConfig.xAxis.axisLabel.margin"
            />
            <div class="title">坐标轴文本标签文本样式</div>
            <colorpicker label="文字颜色" v-model="editConfig.xAxis.nameTextStyle.color"/>
            <slider label="字体大小" :max="40" v-model="editConfig.xAxis.axisLabel.fontSize" />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.xAxis.axisLabel.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.xAxis.axisLabel.fontWeight"
            />
            <xradio
              label="文本垂直对齐方式"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.xAxis.axisLabel.verticalAlign"
            />
            <div class="hr"></div>
            <div class="title">坐标轴刻度设置</div>
            <xradio
              label="刻度是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.xAxis.axisTick.show"
            />
            <xradio
              label="刻度位置"
              :options="[{label:'在内部',value:true},{label:'在外部',value:false}]"
              v-model="editConfig.xAxis.axisTick.inside"
            />
            <slider
              label="刻度长度"
              :max="50"
              v-model="editConfig.xAxis.axisTick.length"
            />
            <colorpicker label="刻度颜色" v-model="editConfig.xAxis.axisTick.lineStyle.color"/>
            <slider
              label="刻度宽度"
              :max="30"
              v-model="editConfig.xAxis.axisTick.lineStyle.width"
            />
          </div>
          <!-- /pane3 -->

          <!--pane4-->
          <div class="pane"  v-show="showPaneId===4" key="c4">
            <xradio
              label="坐标轴位置"
              :options="[{label:'居上',value:'top'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.yAxis.position"
            />
            <div class="hr"></div>
            <xinput label="坐标轴名称" v-model="editConfig.yAxis.name"/>
            <xradio
              label="坐标轴名称位置"
              :options="[{label:'位于开端',value:'start'},{label:'位于末端',value:'end'}]"
              v-model="editConfig.yAxis.nameLocation"
            />
            <div class="title">坐标轴名称文字样式</div>
            <colorpicker label="文字颜色" v-model="editConfig.yAxis.nameTextStyle.color"/>
            <slider label="字体大小" :max="40" v-model="editConfig.yAxis.nameTextStyle.fontSize" />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.yAxis.nameTextStyle.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.yAxis.nameTextStyle.fontWeight"
            />
            <xradio
              label="文本垂直对齐方式"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.yAxis.nameTextStyle.verticalAlign"
            />
            <div class="hr"></div>
            <div class="title">轴线样式设置</div>
            <xradio
              label="轴线是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.yAxis.axisLine.show"
            />
            <colorpicker label="线条颜色" v-model="editConfig.yAxis.axisLine.lineStyle.color" />
            <slider label="线条宽度" v-model="editConfig.yAxis.axisLine.lineStyle.width" />
            <xradio
              label="线条类型"
              :options="[{label:'实线',value:'solid'},{label:'点状线',value:'dotted'},{label:'虚线',value:'dashed'}]"
              v-model="editConfig.yAxis.axisLine.lineStyle.type"
            />

            <div class="hr"></div>
            <div class="title">文本标签设置</div>

            <xradio
              label="文本标签是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.yAxis.axisLabel.show"
            />
            <slider
              label="文本标签旋转角度"
              :min="-180"
              :max="180"
              v-model="editConfig.yAxis.axisLabel.rotate"
              unit="°"
            />
            <slider
              label="文本标签与坐标轴间的距离"
              :max="50"
              v-model="editConfig.yAxis.axisLabel.margin"
            />
            <div class="title">坐标轴文本标签文本样式</div>
            <colorpicker label="文字颜色" v-model="editConfig.yAxis.nameTextStyle.color"/>
            <slider label="字体大小" :max="40" v-model="editConfig.yAxis.axisLabel.fontSize" />
            <xradio
              label="字体样式"
              :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
              v-model="editConfig.yAxis.axisLabel.fontStyle"
            />
            <xradio
              label="字体粗细"
              :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
              v-model="editConfig.yAxis.axisLabel.fontWeight"
            />
            <xradio
              label="文本垂直对齐方式"
              :options="[{label:'居上',value:'top'},{label:'居中',value:'middle'},{label:'居下',value:'bottom'}]"
              v-model="editConfig.yAxis.axisLabel.verticalAlign"
            />
            <div class="hr"></div>
            <div class="title">坐标轴刻度设置</div>
            <xradio
              label="刻度是否显示"
              :options="[{label:'是',value:true},{label:'否',value:false}]"
              v-model="editConfig.yAxis.axisTick.show"
            />
            <xradio
              label="刻度位置"
              :options="[{label:'在内部',value:true},{label:'在外部',value:false}]"
              v-model="editConfig.yAxis.axisTick.inside"
            />
            <slider
              label="刻度长度"
              :max="50"
              v-model="editConfig.yAxis.axisTick.length"
            />
            <colorpicker label="刻度颜色" v-model="editConfig.yAxis.axisTick.lineStyle.color"/>
            <slider
              label="刻度宽度"
              :max="30"
              v-model="editConfig.yAxis.axisTick.lineStyle.width"
            />
          </div>
          <!--/pane4-->

          <!--pane5-->
          <div class="pane"  v-show="showPaneId===999" key="c999">
            <div class="series-box">
              <a href="javascript:;" class="series" :class="{'hover':selSeriesIndex===index}" v-for="(item,index) of editConfig.series" :key="index" @click="selSeriesIndex=index">系列{{index}}</a>
            </div>
            <div v-for="(item,index) of editConfig.series" :key="index" v-show="selSeriesIndex===index">
              <component v-model="editConfig.series[index]" :is="item.type+'config'" />
            </div>
          </div>
          <!--/pane5-->

          <!--pane6-->
          <div class="pane" v-show="showPaneId===10001" key="c10001">
            <div class="theme-box">
              <img class="theme" :src="item.cover" alt="" v-for="(item,index) of themes" :key="item.name" @click="themeHandle(index)"/>
            </div>
          </div>
          <!--/pane6-->
        </transition-group>

      </div>
    </div>
    <div class="chartbox">
      <div id="chart">

      </div>
    </div>
    <div class="cb"></div>
    <div class="tool-box">
      <a href="javascript:;" class="item" :style="{'background-image':'url('+publicPath+'icon-save.png)'}" @click="saveHandle">
        <div class="tip">
          保存图表
          <div class="icon"></div>
        </div>
      </a>
      <a href="javascript:;" class="item" :style="{'background-image':'url('+publicPath+'icon-png.png)'}" @click="exportF('png')">

        <div class="tip">
          转换为PNG
          <div class="icon"></div>
        </div>
      </a>
      <a href="javascript:;" class="item" :style="{'background-image':'url('+publicPath+'icon-jpg.png)'}" @click="exportF('jpeg')">

        <div class="tip">
          转换为JPG
          <div class="icon"></div>
        </div>
      </a>
    </div>
    <transition name="fade" mode="out-in">
      <div class="type-box-wapper" v-if="typeShow">
        <div class="type-box" v-if="type==='line'">
          <a href="javascript:;" class="item" v-for="(item,index) of defLineConfigs" :key="index" @click="typeClickhandle('line',index)">
            <img class="img" :src="item.cover" alt="" />
            <p class="name">{{item.name}}</p>
          </a>
        </div>
        <div class="type-box" v-if="type==='bar'">
          <a href="javascript:;" class="item" v-for="(item,index) of defBarConfigs" :key="index" @click="typeClickhandle('bar',index)">
            <img class="img" :src="item.cover" alt="" />
            <p class="name">{{item.name}}</p>
          </a>
        </div>
        <div class="type-box" v-if="type==='pie'">
          <a href="javascript:;" class="item" v-for="(item,index) of defPieConfigs" :key="index" @click="typeClickhandle('pie',index)">
            <img class="img" :src="item.cover" alt="" />
            <p class="name">{{item.name}}</p>
          </a>
        </div>
      </div>
    </transition>

    <transition name="fade" mode="out-in">
      <div class="type-fbox" v-if="imgShow" @click="imgShow=false">
        <img :src="b64" alt="">
      </div>
    </transition>
  </div>
</template>

<script>
import echarts from 'echarts'
import lodash from 'lodash'
import util from '@/lib/util'
import editConfig from '@/lib/editconfig'
import lineconfig from '@/components/lineconfig'
import barconfig from '@/components/barconfig'
import pieconfig from '@/components/pieconfig'
import seriesEditConfig from '@/lib/serieseditconfig'
import xradio from '@/components/xradio'
import xinput from '@/components/xinput'
import colorpicker from '@/components/colorpicker'
import slider from '@/components/slider'
import slider3 from '@/components/slider3'
import slider5 from '@/components/slider5'
import colorpicker2 from '@/components/colorpicker2'

let chart = null
let sendConfig = null
let xdata = null
// ydata 应该是个二维数组
let ydata = null
let title = ''
export default {
  name: 'app',
  components: {
    lineconfig,
    barconfig,
    pieconfig,
    xradio,
    xinput,
    colorpicker,
    colorpicker2,
    slider,
    slider3,
    slider5
  },
  data () {
    return {
      id: null,
      action: null,
      publicPath: window.projectConfig.publicPath,
      defLineConfigs: window.defaultConfig.lineConfigs,
      defBarConfigs: window.defaultConfig.barConfigs,
      defPieConfigs: window.defaultConfig.pieConfigs,
      themes: window.themes,
      type: null,
      editConfig,
      chartHeight: 0,
      showPaneId: 0,
      selSeriesIndex: 0,
      seriesCount: 0,
      typeShow: false,
      imgShow: false,
      b64: null,
      backBtnUrl: window.defaultConfig.backBtnUrl
    }
  },
  methods: {

    // 设置改变handle
    configChangeHandle (val) {
      // 新建一个对象
      let obj = {}

      // 自定义设置覆盖默认设置
      if (val) {
        lodash.merge(obj, util.clearObj(val))
      }
      // 加载数据
      obj.xAxis.data = xdata

      if (this.type !== 'pie') {
        ydata.forEach((item, index) => {
          obj.series[index].data = item
        })
      } else {
        ydata.forEach((item, index) => {
          let arr = []
          item.forEach((ite, inde) => {
            arr.push({
              name: xdata[inde],
              value: ite
            })
          })
          console.log('out', arr)
          obj.series[index].data = arr
        })
      }
      // 保存设置
      sendConfig = obj
      // echart加载设置
      chart.setOption(obj, true)
    },
    // 3-1 获取表格设置 与用户修改设置合并
    async getChartConfig () {
      let res = await util[window.projectConfig.getChartConfig.method.toLowerCase()](`${window.projectConfig.getChartConfig.url}?${window.projectConfig.getChartConfig.keyName}=${this.id}`)
      lodash.merge(this.editConfig, res)
      // force change
      this.$nextTick(() => {
        res.series.forEach((item, index) => {
          this.$set(this.editConfig.series, index, item)
        })
      })
    },
    // 2 获取数据 初始化
    async getChartData () {
      let res = await util[window.projectConfig.getChartData.method.toLowerCase()](`${window.projectConfig.getChartData.url}?${window.projectConfig.getChartData.keyName}=${this.id}`)
      if (res) {
        res = window.projectConfig.dataFormater(res)
        xdata = res.xdata
        ydata = res.ydata
        this.type = res.type
        this.seriesCount = ydata.length
        if (this.action === 'new') {
          title = res.title
        }
        this.init()
      }
    },
    // 数据输出
    async saveHandle () {
      let res
      if (this.action === 'edit') {
        res = await util[window.projectConfig.editChartConfig.method.toLowerCase()](`${window.projectConfig.editChartConfig.url}?${window.projectConfig.editChartConfig.keyName}=${this.id}`, {
          [window.projectConfig.editChartConfig.keyName]: this.id,
          obj: JSON.stringify(sendConfig)
        })
      } else {
        res = await util[window.projectConfig.saveChartConfig.method.toLowerCase()](`${window.projectConfig.saveChartConfig.url}?${window.projectConfig.saveChartConfig.keyName}=${this.id}`, {
          [window.projectConfig.editChartConfig.keyName]: this.id,
          obj: JSON.stringify(sendConfig)
        })
      }
      if (res) {
        alert(res.msg)
      }
    },
    // 格式导出
    exportF (format) {
      this.b64 = chart.getDataURL({
        type: format,
        backgroundColor: '#FFFFFF'
      })
      this.imgShow = true
    },
    // 3 根据任务类型（添加，修改）进行不同的动作
    init () {
      // 修改
      if (this.action === 'edit') {
        this.getChartConfig()
      } else {
        // 新建
        seriesEditConfig.type = this.type
        for (let i = 0; i < this.seriesCount; i++) {
          this.$set(this.editConfig.series, i, seriesEditConfig)
        }
        // 这里断开 弹窗选择seriers默认类型
        this.typeShow = true
      }
    },
    typeClickhandle (type, configNo) {
      this.typeShow = false
      // 深合并默认设置
      lodash.merge(this.editConfig, window.defaultConfig.common)
      ydata.forEach((item, index) => {
        // 对每个数据项加载默认配置并覆盖自定义配置并加载数据
        lodash.merge(this.editConfig.series[index], window.defaultConfig[this.editConfig.series[index].type + 'Configs'][configNo].config)
      })
      this.editConfig.title.text = title
      // this.editConfig.grid.height = document.getElementById('chart').offsetHeight - 120
      this.chartHeight = document.getElementById('chart').offsetHeight
      // 饼图适配
      if (this.type === 'pie') {
        this.editConfig.xAxis.show = false
        this.editConfig.yAxis.show = false
      }
      this.configChangeHandle(this.editConfig)
    },
    themeHandle (index) {
      // 首次赋值有问题，手动触发
      this.configChangeHandle(lodash.merge(this.editConfig, this.themes[index].config.common))
    }
  },
  watch: {
    editConfig: {
      handler (val) {
        console.log('custom config change', val)
        this.configChangeHandle(val)
      },
      deep: true
    },
    chartHeight () {
      chart.resize({
        height: this.chartHeight
      })
    }
  },
  mounted () {
    this.id = util.getQuery('id')
    if (this.id === null || this.id === void 0) {
      console.error('must have id to get data')
    }
    this.action = util.getQuery('action')
    if (this.action === 'edit') {
      this.action = 'edit'
    } else {
      this.action = 'new'
    }
    // 1 创建echarts实例，ajax请求数据
    this.$nextTick(() => {
      chart = echarts.init(document.getElementById('chart'))
      this.getChartData()
    })
  }
}
</script>
